Vue.use(VueRouter)

const Detail = Vue.component('detail', {
    template: `
    <div class="detail">
		<div>
			<button @click="goBack">Back</botton>
		</div>
        <div class="head info">
            <div class="poster"><img :src="data.poster"/></div>
            <div class="name">{{ data.name }}</div>
        </div>
        <div class="main_content seasons">
            <h3 v-if="results.length == 0">{{ note }}</h3>
            <div class="season" v-for="season in results">
                <div class="season_name">{{ season.season_name }}</div>
                <ul class="episodes">
                    <li v-for="episode in season.episodes">
                        <span class="episode_name">{{ episode.episode_name }}</span>
                        <div class="files">
                            <button class="file_link"
                                v-for="file in episode.files.MP4"
                                v-if="file.way == '1' || file.way == '2'"
                                @click="requestDownload(file.address)">
                                {{ file.way_name }}
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>`,
    data() {
        return {
            platform: 'pc',
            data: {},
            results: [],
			keyWords: '',
            note: "",
			addr: '192.168.3.19',
			port: 6800
        }
    },
    mounted() {
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
            this.platform = 'mobile'
        }
        this.data = this.$route.query
        if (this.data.rid != undefined) {
            this.requestDetail(this.data.rid)
        }
		if (this.$route.query.k != undefined) {
            this.keyWords = this.$route.query.k
        }
    },
    methods: {
        requestDetail(rid) {
            this.note = "查询中，请稍等..."
            this.$http.get('/resource/' + rid)
            .then((res) => {
                if (res.data.data.list == undefined) {
                    this.note = res.data.info
                } else {
                    this.results = res.data.data.list
                }
            }, (res) => {
                // console.debug(res.status)
                this.note = "啥也木有查到"
            })
        },
        requestDownload(address) {
            this.$http.post('/add/' + this.addr + '/' + this.port, {
				'uri': address
			}).then((res) => {
				//console.debug(res)
				alert('已开始下载')
            }, (res) => {
                //console.debug(res.status)
				alert('网络错误, ' + res.status)
            })
        },
		goBack() {
			this.$router.push({ path:'/search', query:{
				k: this.keyWords }})
		}
    }
})

const Search = Vue.component('search', {
    template: `
    <div>
        <div class="head search">
            <input v-model="search.keyWords" placeholder="关键字" maxlength="100" type="search"
            autocorrect="off" autocomplete="off" spellcheck="false"
            @keyup.enter="doSearch"/>
        </div>
        <div class="main_content results">
            <h3 v-if="search.results.length == 0">{{ note }}</h3>
            <ul v-if="search.results.length > 0">
                <li v-for="item in search.results" class="item" @click="showDetail(item)">
                    <div class="poster">
                        <img :src="item.poster" />
                        <div class="channel">{{ item.channel[0].toUpperCase() }}</div>
                    </div>
                    <div v-bind:class="getCss('prompt')">
                        <div class="cnname">{{ item.cnname }}</div>
                        <div class="enname">{{ item.enname }}</div>
                        <div class="status">{{ item.play_status }} / 评分：{{ item.score }}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>`,
    data() {
        return {
            platform: 'pc',
            search: {
                keyWords: '',
                results: []
            },
            note: ""
        }
    },
    mounted() {
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
            this.platform = 'mobile'
        }
        if (this.$route.query.k != undefined) {
            this.search.keyWords = this.$route.query.k
            this.doSearch()
        }
    },
    methods: {
        doSearch() {
            if (this.search.keyWords.length == 0)
                return
            this.note = "查询中，请稍等..."
            this.$http.get('/search/' + this.search.keyWords)
            .then((res) => {
                this.search.results = res.data.data
                if (this.search.results.length == 0) {
                    this.note = "啥也木有查到"
                }
            }, (res) => {
                // console.debug(res.status)
                this.search.results = []
                this.note = "啥也木有查到"
            })
        },
        getCss(base) {
            return [base, base + '_' + this.platform]
        },
        showDetail(data) {
            this.$router.push({ path:'/detail', query:{
				rid: data.id,
				poster: data.poster,
				name: data.cnname,
				k: this.search.keyWords
			}})
        }
    }
})

const MainPage = Vue.component('mainPage', {
    template: `
    <div class="mainPage">
        <h1>看点啥？</h1>
        <input class="search" autofocus placeholder="关键字" maxlength="100" type="search"
            autocorrect="off" autocomplete="off" spellcheck="false" v-model="keyWords"
            @keyup.enter="doSearch">
    </div>`,
    data() {
        return {
            keyWords: '',
        }
    },
    methods: {
        doSearch() {
            if (this.keyWords.length == 0)
                return
            this.$router.push({ path: '/search', query: { k:this.keyWords } })
        }
    }
})

const router = new VueRouter({
    mode: 'hash',
    base: '/home',
    routes: [
        { path: '/', component: MainPage },
		{ path: '/search', component: Search },
		{ path: '/detail', component: Detail }
    ],
})

new Vue({
    router,
    methods: {
        goBack() {
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        }
    }
}).$mount('#app')